<template>
  <div class="userLog">
    <el-dialog :title="title" :visible.sync="showUser" width="480px" :before-close="handleClose" custom-class="dialog">
      <div v-loading="loading" class="marginTop">
        <el-form ref="userForm" label-position="left" status-icon :model="userForm" :rules="rules" label-width="100px">
          <el-form-item label="用户名" prop="userName">
            <el-input v-model.trim="userForm.userName" placeholder="请输入角色名" size="small" />
          </el-form-item>
          <el-form-item label="昵称" prop="nickName">
            <el-input v-model.trim="userForm.nickName" placeholder="请输入角色名" size="small" />
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model.trim="userForm.email" placeholder="请输入角色名" size="small" />
          </el-form-item>
          <el-form-item label="用户类型" prop="userType">
            <el-select v-model="userForm.userType" placeholder="请选择用户类型" style="width: 100%" size="small">
              <el-option v-for="item in userTypeArray" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="用户角色">
            <el-select v-model="userForm.roles" multiple placeholder="请选择用户角色" value-key="name" style="width: 100%" size="small">
              <el-option v-for="item in roleList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button :loading="btnLoading" type="primary" @click="submitRoleForm('userForm')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: {
    showUser: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      roleList: [],
      userTypeArray: [],
      loading: false,
      btnLoading: false,
      userForm: {
        roleName: '',
        roleKey: '',
        email: '',
        nickName: '',
        userType: '',
        roles: ''
      },
      rules: {
        userType: [
          { required: true, message: '请选择用户类型', trigger: 'blur' }
        ],
        nickName: [
          { required: true, message: '请输入昵称', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' }
        ],
        userName: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 关闭前
    handleClose() {
      this.$refs['userForm'].resetFields()
      this.$emit('update:showUser', false)
    },
    // 提交
    submitRoleForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.btnLoading = true
        } else {
          return false
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
/deep/.el-form-item{
  margin-bottom: 18px;
}
</style>
